<template>
  <div style="width: 100vw">

    <div class="shangbian">
      <img class="toubu" src="https://img0.baidu.com/it/u=730416471,802121821&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
      <div class="xubu">
        <div class="cont">
          学生、教师论坛：畅所欲言
        </div>
      </div>
    </div>
    <!-- tab标签区 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="留言" name="first">
        <div class="diyikuai">
          <el-button type="primary" @click="add">添加留言</el-button>
        </div>
        <div class="dierkuai" style="position: relative">
         <div style="width: 100%;position: absolute;bottom: 0">
           <el-input
             type="textarea"
             :rows="2"
             placeholder="请输入内容"
             v-model="textarea">
           </el-input>
         </div>
        </div>
      </el-tab-pane>


    </el-tabs>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="帖子标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="帖子内容">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item label="用户ID（教师或学生）">
          <el-input v-model="form.userId"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="form.createTime"></el-input>
        </el-form-item>
        <el-form-item label="更新时间">
          <el-input v-model="form.updateTime"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>

</template>


<script>
export default {
  name: 'LianxiLiuyan',

  data() {
    return {
      activeName: 'first',
      textarea:'',
      dialogVisible:false,
      form:{

      }
    };
  },

  mounted() {

  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    add(){
      this.dialogVisible=true
    }
  },
};
</script>

<style  scoped>
.shangbian{
  position: relative;
}
.toubu{
  width: 100%;
  height: 300px;
}
.xubu{
  /* background-color: blueviolet; */
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: rgba(55,9,55, 0.5);
  color: rgb(237, 237, 237);
  height: 60px;
  display: flex;
  align-items: center;
}
.cont{
  width: 260px;
  margin: 0 auto;
  box-sizing: border-box;
}
.cont:hover{
  border-bottom: 2px solid rgb(238, 232, 232);
}
.diyikuai{
  width:1500px;
  height: 200px;
  background-color: blueviolet;
}
.dierkuai{
  width: 1500px;
  height: 300px;
  background-color: #e31d1d;
}
</style>



